import React , {Fragment} from "react";
import {
    addHezhangInfo,
    getAdministrativeArea,
    getRiverInfo,
    AddRiverInfo,
    delRiverInfo,
    delHezhangInfo,
    updateRiver,
    selectRiverInfo
} from '../../../service/api';
import './RiverInfo.less';
import Trees from '../../../components/Trees/Trees';
import { Table, Button, Form, Input, Modal, Row, Col, DatePicker, message,Popconfirm} from 'antd';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const { TextArea } = Input;
const FormItem = Form.Item;
//新增河流信息
class AddHeLiu extends React.Component{
    state = { visible: false }

    showModal = () => {
        this.setState({
            visible: true,
            confirmLoading:false
        });
    }

    handleOk = (e) => {
        let self = this;
        this.props.form.validateFields((err, values) => {
            let value_time = values.time._d;
            var year = value_time.getFullYear();
            var month = (value_time.getMonth() + 1)> 9 ? ((value_time.getMonth() + 1) + "") : ("0" + (value_time.getMonth() + 1));
            var day = value_time.getDate()> 9 ? (value_time.getDate() + "") : ("0" + value_time.getDate());
            var hour = value_time.getHours()> 9 ? (value_time.getHours() + "") : ("0" + value_time.getHours());
            var minute = value_time.getMinutes()> 9 ? (value_time.getMinutes() + "") : ("0" + value_time.getMinutes());
            var second = value_time.getSeconds()> 9 ? (value_time.getSeconds() + "") : ("0" + value_time.getSeconds());
            let realtime =  year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" +second;
            values.time = realtime;
            if (!err) {
                self.setState({
                    confirmLoading: true,
                });
                AddRiverInfo(values).then(function (data) {
                    if(data.code === 200){
                        console.log(data);
                        self.setState({
                            visible: false,
                            confirmLoading: false,
                        })
                        self.props.retrieve();

                        message.success("添加成功");
                    }else{
                        message.error(data.msg);
                        self.setState({
                            confirmLoading: false
                        })
                    }
                })

            }
        });
    }

    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    render(){
        const {visible, confirmLoading} = this.state;
        const {getFieldDecorator} = this.props.form;
        return (
            <Fragment>
                <Button className="addNew formAddBtn" type="primary" onClick={this.showModal}>
                    新增
                </Button>
                <Modal
                    title="新增河流信息"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="提交"
                    cancelText="取消"
                    width="80%"
                >
                    <Form className="modalForm">
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                {/*<FormItem label="河流编号">*/}
                                    {/*<Input placeholder="编号" />*/}
                                {/*</FormItem>*/}
                                <FormItem label="河长1姓名">
                                    {getFieldDecorator('chiefname1',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入河长1姓名" }],
                                     })(
                                        <Input placeholder="请输入河长1姓名" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河长1职务">
                                    {getFieldDecorator('chiefduties1',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入河长1职务" }],
                                    })(
                                        <Input placeholder="河长1职务" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                {/*<FormItem label="河流编号">*/}
                                {/*<Input placeholder="编号" />*/}
                                {/*</FormItem>*/}
                                <FormItem label="河长2姓名">
                                    {getFieldDecorator('chiefname2',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入河长2姓名" }],
                                    })(
                                        <Input placeholder="请输入河长2姓名" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河长2职务">
                                    {getFieldDecorator('chiefduties2',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入河长2职务" }],
                                    })(
                                        <Input placeholder="河长2职务" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河流终点">
                                    {getFieldDecorator('endpoint',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入河流终点" }],
                                    })(
                                        <Input placeholder="请输入河流终点" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河流长度">
                                    {getFieldDecorator('length',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入河流长度" }],
                                    })(
                                        <Input placeholder="请输入河流长度" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河流名称">
                                    {getFieldDecorator('name',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入河流名称" }],
                                    })(
                                        <Input placeholder="请输入河流名称" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="宽度">
                                    {getFieldDecorator('width',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入宽度" }],
                                    })(
                                        <Input placeholder="请输入宽度" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="参数1">
                                    {getFieldDecorator('param1',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入参数1" }],
                                    })(
                                        <Input placeholder="请输入参数1" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="参数2">
                                    {getFieldDecorator('param2',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入参数2" }],
                                    })(
                                        <Input placeholder="请输入参数2" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河流等级">
                                    {getFieldDecorator('plevel',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请选择河流等级" }],
                                    })(
                                        <Input placeholder="河流等级" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河道id">
                                    {getFieldDecorator('riverid',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入河道id" }],
                                    })(
                                        <Input placeholder="请输入河道id" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="起始点">
                                    {getFieldDecorator('startpoint',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请选择起始点" }],
                                    })(
                                        <Input placeholder="请选择在起始点" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="流经">
                                    {getFieldDecorator('through',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请输入流经点" }],
                                    })(
                                        <Input placeholder="请输入流经点" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="时间">
                                    {getFieldDecorator('time',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请选择时间" }],
                                    })(
                                        <DatePicker style={{width:'100%'}} locale={locale} showTime format="YYYY-MM-DD HH:mm:ss"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="趋势">
                                    {getFieldDecorator('trend',{
                                        initialValue: "",
                                        rules: [{ required: false, message: "请输入趋势" }],
                                    })(
                                        <Input placeholder="请输入趋势" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="详情">
                                    {getFieldDecorator('other',{
                                        initialValue: "",
                                        rules: [{ required: false, message: "请填写详细情况" }],
                                    })(
                                        <TextArea placeholder="请输入详情" autosize />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>

                            </Col>
                        </Row>
                    </Form>
                </Modal>
            </Fragment>
        )
    }
}
const AddHeLiuForm = Form.create()(AddHeLiu);

//修改河流信息
class EditHeLiu extends React.Component{
    state = {
        visible: false,
        singleRiverInfo:{}
    }

    showModal = (id) => {
        selectRiverInfo(id).then(data=>{
            if(data.code===200){
                this.setState({
                    singleRiverInfo:data.data
                },
                this.setState({
                    visible: true,
                    confirmLoading:false
                }))
            }else{
                message.error(data.msg)
            }
        })
        // this.setState({
        //     visible: true,
        //     confirmLoading:false
        // });
    }
    // getInfoById(id){
    //     alert("获取到父组件传过来的id"+id)
    // }
    handleOk = (e,index) => {
        alert(this.state.singleRiverInfo.id)
        let self = this;
        this.props.form.validateFields((err, values) => {
            let value_time = values.time._d;
            var year = value_time.getFullYear();
            var month = (value_time.getMonth() + 1)> 9 ? ((value_time.getMonth() + 1) + "") : ("0" + (value_time.getMonth() + 1));
            var day = value_time.getDate()> 9 ? (value_time.getDate() + "") : ("0" + value_time.getDate());
            var hour = value_time.getHours()> 9 ? (value_time.getHours() + "") : ("0" + value_time.getHours());
            var minute = value_time.getMinutes()> 9 ? (value_time.getMinutes() + "") : ("0" + value_time.getMinutes());
            var second = value_time.getSeconds()> 9 ? (value_time.getSeconds() + "") : ("0" + value_time.getSeconds());
            let realtime =  year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" +second;
            values.time = realtime;
            if (!err) {
                self.setState({
                    confirmLoading: true,
                });
                updateRiver(this.state.singleRiverInfo.id,values).then(function (data) {
                    if(data.code === 200){
                        console.log(data);
                        self.setState({
                            visible: false,
                            confirmLoading: false,
                        })
                        self.props.retrieve();

                        message.success("添加成功");
                    }else{
                        message.error(data.msg);
                        self.setState({
                            confirmLoading: false
                        })
                    }
                })

            }
        });
    }


    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    render(){
        const {visible, confirmLoading} = this.state;
        const {getFieldDecorator} = this.props.form;
        var value = this.props.value;
        var index = this.props.index;
        console.log("父子传值",value)
        return (
            <Fragment>
                <Button type="primary" onClick={(e)=>{this.showModal(value.id)}}>
                    编辑
                </Button>
                <Modal
                    title="编辑河流信息"
                    visible={this.state.visible}
                    onOk={(e)=>{this.handleOk(e,index)}}
                    onCancel={this.handleCancel}
                    okText="提交"
                    cancelText="取消"
                    width="80%"
                >
                    <Form className="modalForm">
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河长1姓名">
                                    {getFieldDecorator('chiefname1',{
                                        initialValue: this.state.singleRiverInfo.chiefname1,
                                        rules: [{ required: true, message: "请输入河长1姓名" }],
                                    })(
                                        <Input placeholder="请输入河长1姓名" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河长1职务">
                                    {getFieldDecorator('chiefduties1',{
                                        initialValue: this.state.singleRiverInfo.chiefduties1,
                                        rules: [{ required: true, message: "请输入河长1职务" }],
                                    })(
                                        <Input placeholder="河长1职务" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                {/*<FormItem label="河流编号">*/}
                                {/*<Input placeholder="编号" />*/}
                                {/*</FormItem>*/}
                                <FormItem label="河长2姓名">
                                    {getFieldDecorator('chiefname2',{
                                        initialValue: this.state.singleRiverInfo.chiefname2,
                                        rules: [{ required: true, message: "请输入河长2姓名" }],
                                    })(
                                        <Input placeholder="请输入河长2姓名" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河长2职务">
                                    {getFieldDecorator('chiefduties2',{
                                        initialValue: this.state.singleRiverInfo.chiefduties1,
                                        rules: [{ required: true, message: "请输入河长2职务" }],
                                    })(
                                        <Input placeholder="河长2职务" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河流终点">
                                    {getFieldDecorator('endpoint',{
                                        initialValue: this.state.singleRiverInfo.endpoint,
                                        rules: [{ required: true, message: "请输入河流终点" }],
                                    })(
                                        <Input placeholder="请输入河流终点" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河流长度">
                                    {getFieldDecorator('length',{
                                        initialValue: this.state.singleRiverInfo.length,
                                        rules: [{ required: true, message: "请输入河流长度" }],
                                    })(
                                        <Input placeholder="请输入河流长度" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河流名称">
                                    {getFieldDecorator('name',{
                                        initialValue: this.state.singleRiverInfo.name,
                                        rules: [{ required: true, message: "请输入河流名称" }],
                                    })(
                                        <Input placeholder="请输入河流名称" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="宽度">
                                    {getFieldDecorator('width',{
                                        initialValue: this.state.singleRiverInfo.width,
                                        rules: [{ required: true, message: "请输入宽度" }],
                                    })(
                                        <Input placeholder="请输入宽度" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="参数1">
                                    {getFieldDecorator('param1',{
                                        initialValue: this.state.singleRiverInfo.param1,
                                        rules: [{ required: true, message: "请输入参数1" }],
                                    })(
                                        <Input placeholder="请输入参数1" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="参数2">
                                    {getFieldDecorator('param2',{
                                        initialValue: this.state.singleRiverInfo.param2,
                                        rules: [{ required: true, message: "请输入参数2" }],
                                    })(
                                        <Input placeholder="请输入参数2" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河流等级">
                                    {getFieldDecorator('plevel',{
                                        initialValue: this.state.singleRiverInfo.plevel,
                                        rules: [{ required: true, message: "请选择河流等级" }],
                                    })(
                                        <Input placeholder="河流等级" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河道id">
                                    {getFieldDecorator('riverid',{
                                        initialValue: this.state.singleRiverInfo.riverid,
                                        rules: [{ required: true, message: "请输入河道id" }],
                                    })(
                                        <Input placeholder="请输入河道id" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="起始点">
                                    {getFieldDecorator('startpoint',{
                                        initialValue: this.state.singleRiverInfo.startpoint,
                                        rules: [{ required: true, message: "请选择起始点" }],
                                    })(
                                        <Input placeholder="请选择在起始点" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="流经">
                                    {getFieldDecorator('through',{
                                        initialValue: this.state.singleRiverInfo.through,
                                        rules: [{ required: true, message: "请输入流经点" }],
                                    })(
                                        <Input placeholder="请输入流经点" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="时间">
                                    {getFieldDecorator('time',{
                                        initialValue: moment(this.state.singleRiverInfo.time, 'YYYY-MM-DD HH:mm:ss'),
                                        rules: [{ required: true, message: "请选择时间" }],
                                    })(
                                        <DatePicker style={{width:'100%'}} locale={locale} showTime format="YYYY-MM-DD HH:mm:ss"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="趋势">
                                    {getFieldDecorator('trend',{
                                        initialValue: this.state.singleRiverInfo.trend,
                                        rules: [{ required: false, message: "请输入趋势" }],
                                    })(
                                        <Input placeholder="请输入趋势" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="详情">
                                    {getFieldDecorator('other',{
                                        initialValue: this.state.singleRiverInfo.other,
                                        rules: [{ required: false, message: "请填写详细情况" }],
                                    })(
                                        <TextArea placeholder="请输入详情" autosize />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>

                            </Col>
                        </Row>
                    </Form>
                </Modal>
            </Fragment>
        )
    }
}
const EditHeLiuForm = Form.create()(EditHeLiu);



var columns;
let columns1 = [
    {
        dataIndex: 'riverid',
        title: '河流编号',
        width: 80
    },
    {
        dataIndex: 'name',
        title: '河流名称',
        width: 120
    },
    {
        dataIndex: 'chiefname',
        title: '河长',
        width: 150
    },
    {
        dataIndex: 'length',
        title: '长度',
        width: 100
    },
    {
        dataIndex: 'plevel',
        title: '河流等级',
        width: 80
    },
    {
        dataIndex: 'through',
        title: '流经',
        width: 350
    }
]

class RiverInfo extends React.Component {

    state = {
        permissions: JSON.parse(localStorage.permissions),
        limit: 20,
        offset: 0,
        chiefName: "",
        regionID: "",
        data: [],
        loading: true,
        pagination: {pageSize: 20},
        height: document.body.clientHeight - 230,
    }

    componentDidMount() {
        var columns_detail = [{
                dataIndex: 'param',
                title: '详情',
                width: 80,
                render: (text,record) => (
                    <span className="getInfo" onClick={() => this.getInfo(record.key)}>详情</span>
                )
            },{
                dataIndex: 'edit',
                title: '编辑',
                width: 120,
                render: (text,record,index) => (
                    <div>
                        {this.state.permissions["sys:rivers:update"]?
                            <EditHeLiuForm value = {record} index={index} retrieve={this.getData}>编辑</EditHeLiuForm>
                        :true}
                    </div>
                )
            },{
            dataIndex: 'action',
            title: '删除',
            width: 120,
            render: (text,record) => (
                <div>
                    {this.state.permissions["sys:rivers:delete"]?
                    <Popconfirm placement="leftBottom" title={`确定删除当前河流吗?`} id={record.id.toString()} onConfirm={() => this.deleteRiverInfo(record.id)} okText="确定" cancelText="取消">
                        <Button type="danger" className="ml10" id={record.id} ghost>删除</Button>
                    </Popconfirm>:true}
                </div>
            )
            }]
        columns = columns1.concat(columns_detail)
        this.getData();
    }
    componentWillUnmount(){
        columns = [];
    }
    editRiverInfo(id){

    }
    // getDetailInfo(id){
    //     this.props.getInfoById(id);
    // }
    deleteRiverInfo = (id) => {
        let self = this;
        delRiverInfo(id).then(function (data) {
            if(JSON.parse(data).code === 200){
                self.getData();
                message.success("删除成功");
            }else{
                message.error(data.msg)
            }
        })
    }
    getInfo = (key) => {
        Modal.info({
            title: this.state.data[key].name,
            content: (
                <div>
                    <p>{this.state.data[key].param1}</p>
                    <p>{this.state.data[key].param2}</p>
                </div>
            ),
            onOk() {},
        });

    }

    getData = () => {
        let self = this;
        const pagination = { ...this.state.pagination };
        self.setState({loading: true});
        getRiverInfo({
            limit: this.state.limit,
            offset: this.state.offset,
            regionID: this.state.regionID,
            chiefName: this.state.chiefName,
        }).then(function (data) {
            pagination.total = data.data.total;
            if(data.code === 200){
                self.setState({data: data.data.rows, showData: data.data.rows, loading: false, pagination})
            }
        })

    }

    handleTableChange = (pagination, filters, sorter)=> {
        this.setState({loading: true, offset: (pagination.current-1)*pagination.pageSize},function () {
            this.getData();
        })
    }

    getId = (value)=> {
        this.setState({
            regionID: value[0]
        },()=>{
            this.getData()
        })
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            this.setState({
                chiefName: values.chiefName
            }, () => {
                this.getData()
            })
        })

    }

    render(){
        const { getFieldDecorator } = this.props.form;

        let data = [];
        if(this.state.data.length){
            for(let i in this.state.data){
                data.push({
                    key: i,
                    id: this.state.data[i].id,
                    riverid: this.state.data[i].riverid,
                    name: this.state.data[i].name,
                    length: this.state.data[i].length,
                    plevel: this.state.data[i].plevel,
                    chiefname: this.state.data[i].chiefname1+" "+this.state.data[i].chiefname2,
                    through: this.state.data[i].through,
                    param1: this.state.data[i].param1,
                })
            }
        }

        return(
            <div className="clearfix hezhangInfo page" style={{paddingTop:'10px'}}>
                {/*<div className="treeArea">*/}
                    {/*<Trees getId={this.getId} />*/}
                {/*</div>*/}
                <div className="clearfix">
                    <div className="clearfix">
                        <Form className="fl searchForm" layout="inline"  onSubmit={this.handleSubmit}>
                            <FormItem>
                                {getFieldDecorator('chiefName',{
                                    initialValue: ""
                                })(
                                    <Input placeholder="河长" />
                                )}
                            </FormItem>

                            <FormItem>
                                <Button
                                    className="selectRiver"
                                    type="primary"
                                    htmlType="submit"
                                >
                                    查询
                                </Button>
                            </FormItem>
                        </Form>
                        {this.state.permissions["sys:rivers:add"]?<AddHeLiuForm retrieve={this.getData} />:true}
                    </div>
                    <Table className="mt10 scrollTable" columns={columns} dataSource={data} loading={this.state.loading} pagination={this.state.pagination} onChange={this.handleTableChange} scroll={{y: this.state.height }} bordered />
                </div>
            </div>
        )
    }

}
const RiverInfoForm = Form.create()(RiverInfo);
export default RiverInfoForm;